<template>
  <a-spin :spinning="spinning" tip="加载中...">
    <a-card :bordered="false">
      <h3 style="margin-bottom: 20px;">{{ id ? '编辑已有模版' : '创建新的模版' }}</h3>
      <a-form-model ref="rulesForm" :model="form" :rules="rules" :labelCol="{ lg: { span: 5 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 16 }, sm: { span: 17 } }">
        <a-form-model-item label="身份标识名称" prop="identityName">
          <a-input v-model="form.identityName" :maxLength="24" />
          <div>限24个字符以内</div>
        </a-form-model-item>
        <a-form-model-item class="pic1" label="图一">
          <JImageUpload :isMove="false" :uploadParams="getUploadParams()" :isMultiple="true" :fileSize="1" :number="1" :accept="'image/*'" @fileChange="fileImageChange" v-model="imageOne"></JImageUpload>
          <div>注：高51px，宽自适应，支持PNG, JPG和GIF格式，大小不超过1M</div>
        </a-form-model-item>
        <a-form-model-item class="pic2" label="图二">
          <JImageUpload :isMove="false" :uploadParams="getUploadParams()" :isMultiple="true" :fileSize="1" :number="1" :accept="'image/*'" @fileChange="fileImage2Change" v-model="imageTwo"></JImageUpload>
          <div>注：45-45px，支持PNG, JPG和GIF格式，大小不超过1M</div>
        </a-form-model-item>
        <a-form-model-item label="其内容是否需要人审" v-if="id > 2 || !id" prop="isAudit">
          <a-radio-group v-model="form.isAudit">
            <a-radio :value="0">是</a-radio>
            <a-radio :value="1">否</a-radio>
          </a-radio-group>
          <div>注：无论是否人审均会先进行机审</div>
        </a-form-model-item>
        <a-form-model-item label="内容推广权限" prop="isPromote">
          <a-radio-group v-model="form.isPromote"> 
            <a-radio :value="0">图片/视频支持带商品推广</a-radio>
            <a-radio :value="1">图片/视频不支持带商品推广</a-radio>
          </a-radio-group>
          <div>注：明星KOL等代言图，若不支持带商品推广，请正确设置推广权限，避免不必要的投诉</div>
        </a-form-model-item>
  
        <a-form-model-item label="其他渠道是否可用" prop="isUse">
          <a-radio-group v-model="form.isUse">
            <a-radio value="0">是</a-radio>
            <a-radio value="1">否</a-radio>
          </a-radio-group>
          <div>注：设置该用户发布的内容是否支持其他渠道应用</div>
        </a-form-model-item>
  
        <a-form-model-item label="视频长度上限" prop="videoLength">
          <a-select v-model="form.videoLength" placeholder="请选择" show-search :filter-option="filterOption">
            <a-select-option value="60">60s</a-select-option>
            <a-select-option value="90">90s</a-select-option>
            <a-select-option value="180">3分钟</a-select-option>
            <a-select-option value="300">5分钟</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" @click="handleSubmit" type="primary">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </a-spin>
  </template>
  <script>
  import JImageUpload from '../../components/JImageUpload'
  import { userAddIdentity } from '@/api/micromall/communityUser'
  
  export default {
    components: {
      JImageUpload
    },
    data() {
      return {
        id: '',
        spinning: false,
        form: {
          isAudit: 1,
          channel: 1,
          isUse: '1'
        },
        look: {},
        imageOne: [],
        imageTwo: [],
        rules: {
          identityName: [{ required: true, message: '请输入', trigger: 'blur' }],
          isPromote: [{ required: true, message: '请选择', trigger: 'change' }],
          isAudit: [{ required: true, message: '请选择', trigger: 'change' }],
          videoLength: [{ required: true, message: '请选择', trigger: 'change' }],
          channel: [{ required: true, message: '请选择', trigger: 'change' }],
          isUse: [{ required: true, message: '请选择', trigger: 'change' }]
        }
      }
    },
    created() {
      this.getDetails()
    },
    computed: {
      disabled(){
        if (!this.id) {
          return false
        } else {
          return this.id <= 3
        }
      }
    },
    mounted() {},
    methods: {
      // 获取详情
      getDetails() {
        if (this.$route.query.item == 'null') return
        const item = JSON.parse(decodeURIComponent(this.$route.query.item))
        const { id, imageOne, imageTwo } = item
        this.id = id
        this.form = {
          ...item
        }
        this.imageOne = [imageOne]
        this.imageTwo = [imageTwo]
      },
  
      getUploadParams() {
        return {
          actionUrl: 'https://jic.jnby.com/activity/market-act/common/upload/multipart',
          headers: {
            authorization: 'authorization-text'
          },
          uploadHost: 'https://img.bzhz.jnbygroup.com/'
        }
      },
      // 图片change
      fileImageChange(list) {
        this.form.imageOne = list.length ? list[0].url : ''
      },
  
      // 图片change
      fileImage2Change(list) {
        this.form.imageTwo = list.length ? list[0].url : ''
      },
  
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
  
      // 确认
      handleSubmit() {
        this.$refs.rulesForm.validate(valid => {
          if (valid) {
            // const { imageOne, imageTwo} = this.form
            // if ((!imageOne || !imageTwo) && this.id != 2) {
            //   this.$message.error('请上传图片！')
            //   return
            // }
            const data = {
              ...this.form
            }
            this.spinning = true
            userAddIdentity(data)
              .then(res => {
                if (res.code === 200) {
                  this.$router.go(-1)
                } else {
                  this.spinning = false
                  this.$message.error(res.data.msg || res.msg)
                }
              })
              .catch(err => {
                this.spinning = false
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
  </script>
  <style lang="less" scoped>
  .pic1 /deep/ .my-img-item {
    width: 220px;
    margin: 0 8px 8px 0;
  }
  .pic2 /deep/ .my-img-item {
    margin: 0 8px 8px 0;
  }
  .pic1 /deep/ .ant-upload.ant-upload-select-picture-card {
    width: 220px;
  }
  .pic1 /deep/ .ant-upload-list-picture-card-container {
    width: 220px;
  }
  </style>
  